<template>
    <div class="register">
        <div class="top">
            <span class="back iconfont icon--back" @click="back"></span>
            <span class="loginText">注册</span>
            <span class="home iconfont icon-shouye" @click="toHome"></span>
        </div>
        <div class="logo">
            <img class="logoImg" src="@/assets/img/logo.png" alt="">
        </div>
        <div class="phpone-pwd">
             <p class="phpone">
                <span class="iconfont icon-wode"></span>
                <input class="iptTop" type="text" placeholder="请输入用户名" v-model="username">
            </p>
            <p class="phpone">
                <span class="iconfont icon-shouji"></span>
                <input class="iptTop" type="text" placeholder="请输入手机号码" v-model="telphone">
            </p>
            <p class="pwd">
                <span class="iconfont icon-suo"></span>
                <input class="iptBot" :type="password" placeholder="请输入密码" v-model="pwd">
                <span class="iconfont icon-yanjing1" @click="seepwd"></span>
            </p>
            <p class="pwd pwdB">
                <span class="iconfont icon-yanzhengma"></span>
                <input class="iptBot  iptBotB" type="text" placeholder="请输入验证码" v-model="code">
                <button class="getCode" :disabled="msg !='获取验证码'" @click="getCode">{{msg}}</button>
            </p>

            <div class="btn" @click="onRegister">立即注册</div>
            
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
    export default {
        data() {
            return {
                username:'',
                telphone:'',
                pwd:'',
                repwd:'',
                msg:'获取验证码',
                num:0,
                code:'',
                count:0,
                password:'password'
            }
        },
        methods: {
            toHome(){
                this.$router.push('/home')
            },

            //获取验证码
            getCode(){
                const tel=this.telphone
                if(!(/^1[0-9]{10}$/).test(tel)){
                    Toast('请输入正确手机号')
                    return false
                }

                let num=10
                const timer=setInterval(()=>{
                    num--
                    if(num<=0){
                        clearTimeout(timer)
                        this.msg='获取验证码'
                    }else{
                        this.msg=`验证码已发送(${num})`
                    }
                },1000)

                this.$axios.post('/zhouliang/api/register/getCode',{
                    tel:tel
                })
                .then((res)=>{
                    
                    const {msg,code}=res
                    if(code==1){
                        console.log(msg)
                    }
                    else{
                        console.log(msg)
                    }
                })
            },


            onRegister(){
                const user=this.username
                const tel=this.telphone
                const pwd=this.pwd
                const code=this.code
                console.log(code)

                if(!(user&&tel&&pwd&&code)){
                    Toast('请填写完整资料');
                }else{
                    this.$axios.post('/zhouliang/api/register/useCode',{
                        username:user,
                        password:pwd,
                        tel:tel,
                        code:code,
                    })
                    .then((res)=>{
                        console.log(res)
                        const {code,msg}=res
                        if(code==1){
                              Toast({
                                duration:1000,
                                message:'注册成功'
                            });
                            this.$router.replace('/login')
                        }
                        else{
                            Toast(msg)
                        }
                    })

                }
            },
            back(){
                this.$router.back()
            },

            //点击显示密码
            seepwd(){
               
                this.count++
                if(this.count%2==1){
                    this.password='text'
                }else if(this.count%2==0){
                    this.password='password'
                }

            }


        },
    }
</script>

<style lang="scss" scoped>
.top{
        height: 1rem;
        width: 100vw;
        background-color: #3ac149;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.3rem;
        color: white;

        .back,.home{
            font-size: 0.4rem; 
            padding: 0 0.3rem; 
            color: white;
        }
    }
    .logo{
        width: 100vw; 
        height: 4rem;

        .logoImg{
            width: 100%;
            height: 100%;
            // object-fit: cover;
        }
    }
    .phpone-pwd{
        background-color: #fff;
        padding:0.3rem 0;
        .phpone{
            padding: 0.2rem 0.2rem;
            border-bottom: 1px solid rgb(243, 240, 240);
            .iconfont{
                padding-right: 0.2rem;
                font-size: 0.3rem;
            }
            .iptTop{
                width: 90%;
                border: none;
                height: 0.5rem;
            }

        }
        .pwd{
            padding: 0.2rem 0.2rem;
            border-bottom: 1px solid rgb(243, 240, 240);
            display: flex;
            align-items: center;
            .icon-suo,.icon-yanzhengma{
                padding-right: 0.2rem;
                font-size: 0.3rem;
            }
            .iptBot{
                width: 90%;
                border: none;
                height: 0.5rem;
            }
             .iptBotB{
                width: 50%;

            }
            .getCode{
                display: block;
                background-color: #3ac149;
                padding: 0.2rem 0.4rem;
                margin-left: 0.5rem;
                border: none;
            }
            
            
        }
       
        .btn{
            display: flex;
            justify-content: center;
            width: 80%;
            margin: auto;
            background-color:#fafafa;
            height: 0.7rem;
            align-items: center;
            border-radius: 0.5rem;
            margin-top: 0.3rem;
            
           
        }
       
       
    }
</style>